<template>
  <el-form
      ref="forgotFormRef"
      :model="forgotForm"
      :rules="forgotRules"
      label-width="100px"
  >
    <!-- 验证方式选择 -->
    <el-form-item label="验证方式" prop="method">
      <el-radio-group v-model="forgotForm.method">
        <el-radio label="email">邮箱验证</el-radio>
        <el-radio label="phone">手机验证</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 邮箱输入 -->
    <el-form-item
        label="邮箱"
        prop="email"
        v-if="forgotForm.method === 'email'"
    >
      <el-input
          v-model="forgotForm.email"
          placeholder="请输入注册邮箱"
          prefix-icon="Message"
      />
    </el-form-item>

    <!-- 手机号输入 -->
    <el-form-item
        label="手机号"
        prop="phone"
        v-if="forgotForm.method === 'phone'"
    >
      <el-input
          v-model="forgotForm.phone"
          placeholder="请输入注册手机号"
          prefix-icon="Iphone"
          @input="forgotForm.phone = forgotForm.phone.replace(/\D/g, '')"
      />
    </el-form-item>

    <!-- 新密码 -->
    <el-form-item label="新密码" prop="newPassword">
      <el-input
          v-model="forgotForm.newPassword"
          :type="passwordVisible ? 'text' : 'password'"
          placeholder="设置新密码"
          prefix-icon="Lock"
      >
        <template #suffix>
          <el-icon
              class="password-toggle"
              @click="passwordVisible = !passwordVisible"
          >
            <View v-if="passwordVisible" />
            <Hide v-else />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <!-- 确认密码 -->
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input
          v-model="forgotForm.confirmPassword"
          :type="passwordVisible ? 'text' : 'password'"
          placeholder="再次输入新密码"
          prefix-icon="Lock"
      />
    </el-form-item>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button
          type="primary"
          class="submit-btn"
          @click="handleResetPassword"
          :loading="isResetting"
      >
        重置密码
      </el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { View, Hide } from '@element-plus/icons-vue';

const emit = defineEmits(['close']);

const forgotForm = reactive({
  method: 'email',
  email: '',
  phone: '',
  newPassword: '',
  confirmPassword: ''
});

const forgotFormRef = ref();
const isResetting = ref(false);
const passwordVisible = ref(false);

const forgotRules = {
  method: [
    { required: true, message: '请选择验证方式', trigger: 'change' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 8, message: '密码长度至少8位', trigger: 'blur' }
  ],
  confirmPassword: [
    {
      validator: (_, value, callback) => {
        if (value !== forgotForm.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

const handleResetPassword = async () => {
  if (!forgotFormRef.value) return;

  const valid = await forgotFormRef.value.validate();
  if (!valid) return;

  isResetting.value = true;

  try {
    // 模拟重置密码请求
    await new Promise(resolve => setTimeout(resolve, 1000));

    ElMessage.success('密码重置成功！请使用新密码登录');
    emit('close');
  } catch (error) {
    ElMessage.error('密码重置失败，请重试');
  } finally {
    isResetting.value = false;
  }
};
</script>

<style scoped>
.code-input {
  display: flex;
  gap: 10px;
}

.send-code-btn {
  white-space: nowrap;
}

.password-toggle {
  cursor: pointer;
  color: #606266;
  font-size: 18px;
  transition: color 0.3s;
}

.password-toggle:hover {
  color: #409EFF;
}
</style> 